<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>主页</title>

    <style>
        body{
            margin: 0;
        }
        .index-nav {
            width: 100%;
            height: 80px;
            background-color: #333333;
        }

        /* 内部容器布局 */
        .index-nav-frame {
            display: flex;
            justify-content: space-between;
            padding-top: 20px;
            position: relative;
        }

        .title {
            font-size: 36px;
            font-family: youyuan;
            font-weight: bold;
            color: #ffffff;
            margin-right: auto;
            margin-left: 20px;
        }

        .index-nav-frame-line {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .index-nav-frame-line a {
            font-weight: bold;
        }

        .index-nav-frame-line a:hover {
            text-decoration: underline;
        }

         /*退出按钮 */
        .btn1 {
            padding: 5px 15px;
            font-size: 20px;
            background-color: #ffffff;
            text-decoration: none;
            color: #333333;
            border-radius: 5px;
            display: inline-block;
            margin-right: 40px;
        }

        .btn1:hover {
            background-color: #de7850;
            color: #ffffff;
        }

        /* 左侧导航栏 */
        .left {
            width: 220px;
            background-color: #de9050;
            padding: 20px 0;
            /*box-shadow: 2px 0 5px rgb(255, 171, 140);*/
            height: 86vh;
            top: 0;
            left: 0;
            z-index: 10;
        }

        .index-nav-frame-line2 {
            margin-bottom: 50px;
            margin-left: 25px;

            .btn2 {
                display: block;
                width: 75%;
                padding: 10px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                color: #333;
                background-color: #ffffff;
                border: 1px solid #333333;
                border-radius: 4px;
                text-decoration: none;
                transition: all 0.3s ease;
            }

            .btn2:hover {
                background-color: #ffefc5;
                color: #33130a;
            }

            .btn2:active {
                background-color: #0056b3;
            }
        }

    </style>

</head>
<body>
<div class="index-nav">
    <div class="index-nav-frame clearfix">

        <div class="title">宠物信息管理系统</div>
        <div class="index-nav-frame-line" style="float: right;color: #ffc2ac;width: 200px">
            欢 迎：<a>${loginUser.username}</a>
        </div>
        <div class="index-nav-frame-line" style="float: right;" tabindex="-1">
            <a href="AuthServlet?action=logout" class="btn1 btn-line btn-primary btn-sm">退 出</a>
        </div>
    </div>
</div>

<div class="left">
    <div class="index-nav-frame-line2" tabindex="-1" style="margin-top: 20px">
        <a class="btn2 btn-line btn-default btn-sm" href="PetServlet">宠物管理</a>
    </div>
    <div class="index-nav-frame-line2" tabindex="-1">
        <a class="btn2 btn-line btn-default btn-sm" href="UserServlet">用户管理</a>
    </div>
    <div class="index-nav-frame-line2" tabindex="-1">
        <a class="btn2 btn-line btn-default btn-sm" href="NoticeServlet">公告管理</a>
    </div>

</div>

</div>
</div>

</body>
</html>


